{% extends "annotation/annotation_base.html" %}
{% load static %}
{% block annotation-area %}
<div class="card vld-parent" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <loading :active.sync="isLoading" :can-cancel="true">
    <template v-slot:before>
        <p>[[ loadingMsg ]]</p>
    </template>
  </loading>
  <header class="card-header">
    <div class="card-header-title has-background-royalblue" style="padding:1.5rem;">
      <div class="field is-grouped is-grouped-multiline">
        <div class="control" v-for="label in labels">
          <div class="tags has-addons">
            <a class="tag is-medium" v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }" v-on:click="annotate(label.id)"
              v-shortkey.once=" replaceNull(label.shortcut) " @shortkey="annotate(label.id)">
              [[ label.text ]]
            </a>
            <span class="tag is-medium"><kbd>[[ label.shortcut | simpleShortcut ]]</kbd></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="card-content">
      <span class="tag">Annotating section</span>
      <span class="tag" v-if="confidence">confidence : [[ confidenceElement ]]</span>
    <div class="content" v-if="docs[pageNumber] && annotations[pageNumber]">
      <annotator ref="annotator" v-bind:labels="labels" v-bind:entity-positions="annotations[pageNumber]" v-bind:text="docs[pageNumber].text"
        @remove-label="removeLabel" @add-label="addLabel"></annotator>
    </div>
  </div>
  <div class="card-content">
      <span class="tag">Recommendation section</span>
    <div class="content" v-if="docs[pageNumber] && recommendations[pageNumber]">
      <recommender ref="recommender" v-bind:labels="labels" v-bind:text="docs[pageNumber].text"
        v-bind:recommend-positions="recommendations[pageNumber]" @remove-label="removeLabel" @add-label="addLabel"></recommender>
    </div>
  </div>
</div>
{% endblock %}

{% block footer %}
<script src="{% static 'bundle/sequence_labeling.js' %}"></script>
{% endblock %}